<template>
  <ul :class="classes" :lay-filter="filter">
    <slot></slot>
    <!-- <li class="layui-nav-item layui-this"><a href="">产品</a></li>
    <li class="layui-nav-item"><a href="">大数据</a></li>
    <li class="layui-nav-item">
      <a href="javascript:;">解决方案</a>
      <dl class="layui-nav-child">
        <dd><a href="">移动模块</a></dd>
        <dd><a href="">后台模版</a></dd>
        <dd><a href="">电商平台</a></dd>
      </dl>
    </li>
    <li class="layui-nav-item"><a href="">社区</a></li> -->
  </ul>
</template>

<script>
import element from "../element";
import Icon from "../icon";
import { oneOf } from "../../utils/assist";

const prefixCls = "layui-nav";
export default {
  name: "Navbar",
  props: {
    filter: String,
    clicked: Function,
    type: {
      type: String,
      validator(value) {
        return oneOf(value, ["tree"]);
      }
    },
    sided: Boolean
  },
  computed: {
    classes() {
      return [
        prefixCls,
        {
          [`${prefixCls}-${this.type}`]: !!this.type,
          [`${prefixCls}-side`]: !!this.sided
        }
      ];
    }
  },
  updated() {
    this.$nextTick(() => {
      element.render("nav");
      if (this.filter) {
        element.on(`nav(${this.filter})`, elem => {
          if (this.clicked) {
            this.clicked(elem);
          }
        });
      }
    });
  }
};
</script>

<style scoped>

</style>